<script type="text/x-template" id="home-header-convert">
    <div>
        <el-row>
        <el-col :span="12">
            <el-button type="info" @click="openWebUrl('http://wiki.skyoss.com/pages/viewpage.action?pageId=33478534')">
                查看主页请求头获取wiki
            </el-button>
            <el-button type="primary" @click="openWebUrl('http://139.199.224.29:5601/app/kibana#/discover')">
                跳转Kibana
            </el-button>
        </el-col>
        <el-col :span="12">
            <el-card>
                <div slot="header" class="clearfix">
                    <span style="font: bold">kibana查询条件示例</span>
                </div>
                <pre style="color: #44aa00">{{ tipInfo }}</pre>
            </el-card>
        </el-col>
        </el-row>
        <el-form ref="convertForm" :rules="rules" :model="homeHeaderConvertFormData" label-width="170px">
            <el-form-item label="转化前的数据" prop="jsonData">
                <cc-json-edit-el v-model="homeHeaderConvertFormData.jsonData"
                >
                </cc-json-edit-el>
            </el-form-item>
            <el-form-item label="转化后的请求头" prop="keyvalData">
                <el-input
                        type="textarea"
                        v-model="homeHeaderConvertFormData.keyvalData"
                        :rows="6"
                        disabled
                >
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="handleCopyData(homeHeaderConvertFormData.keyvalData)" style="width: 200px">复制转化后的数据</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</script>

<script>
    Vue.component('home-header-convert', {
        template: '#home-header-convert',
        data() {
            return {
                homeHeaderConvertFormData: {
                    keyvalData: '',
                    jsonData: '',
                },
                rules: {
                    jsonData: [
                        {required: true, message: '请输入要转化的数据'}
                    ]
                },
                tipInfo:'chip:8S48 AND model:E2A AND mac:2835452879a7'
            }
        },
        computed: {},
        methods: {
            handleSubmit: function () {
                this.$refs.convertForm.validate(function (valid) {
                    if (valid) {
                        this.handleConvert()
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            resetForm: function () {
                //重置按钮
                this.$refs.convertForm.resetFields();
            },
            handleConvert: function () {
                var keyvalData = this.handleJson2KeyValHeader(this.homeHeaderConvertFormData.jsonData);
                this.homeHeaderConvertFormData.keyvalData = keyvalData;

            },
            handleJson2KeyValHeader: function (jsonData) {
                let jsonHeader = JSON.parse(JSON.stringify(jsonData));
                let result = [];
                result.push('MAC:'+this.getAvoidNullStringVal(jsonHeader, 'mac'));
                result.push('cChip:'+this.getAvoidNullStringVal(jsonHeader, 'chip'));
                result.push('cModel:'+this.getAvoidNullStringVal(jsonHeader, 'model'));
                result.push('cAppVersion:'+this.getAvoidNullStringVal(jsonHeader, 'appver'));
                result.push('cFMode:'+this.getAvoidNullStringVal(jsonHeader, 'fmode'));
                result.push('cPattern:'+this.getAvoidNullStringVal(jsonHeader, 'pattern'));
                result.push('aSdk:'+this.getAvoidNullStringVal(jsonHeader, 'sdk'));
                result.push('Resolution:'+this.getAvoidNullStringVal(jsonHeader, 'res'));
                result.push('cOpenId:'+this.getAvoidNullStringVal(jsonHeader, 'openid'));
                result.push('cTcVersion:'+this.getAvoidNullStringVal(jsonHeader, 'tcver'));
                result.push('cUDID:'+this.getAvoidNullStringVal(jsonHeader, 'udid'));
                result.push('cPkg:'+this.getAvoidNullStringVal(jsonHeader, 'cpkg'));
                result.push('cBrand:'+this.getAvoidNullStringVal(jsonHeader, 'brand'));
                result.push('cSize:'+ this.getAvoidNullStringVal(jsonHeader, 'size'));
                result.push('headerVersion:'+this.getAvoidNullStringVal(jsonHeader, 'hver'));
                return result.join("\n");
            },
        },
        watch: {
            'homeHeaderConvertFormData.jsonData': {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (newVal) {
                        this.handleSubmit();
                    }
                }
            }
        },
        mounted() {

        },
        created() {
        }
    })
</script>

<style>
    .action-list .el-form-item {
        margin-bottom: 0px
    }

</style>